<template>
  <view class="page">
    <view class="user-head">
      <image class="user-head__head"></image>
      <view class="user-head__profile">
        <text class="user-head__profile-nick">Nick</text>
        <text class="user-head__profile-id">Id</text>
      </view>
    </view>

    <view class="space-placeholder"></view>
    <view class="profile-method">
      <view class="profile-method-label">朋友权限</view>
      <view class="profile-method-value">设置</view>
    </view>
    <view class="space-placeholder"></view>
    <view class="profile-method">
      <view class="profile-method-label">更多信息</view>
      <view class="profile-method-value">查看</view>
    </view>
  </view>
</template>

<script>
  export default {
    mounted () {
      uni.setNavigationBarTitle({
      	title: 'Profile'
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../components/common";
  .page {
    min-height: 100vh;
    background-color: #f2f2f2;
  }

  .user-head {
    @extend .flex;
    @extend .flex-layer;
    background-color: $c-white;
    padding: 15px;
    .user-head__head {
      @extend .flex-shrink;
      width: 80px;
      height: 80px;
      border-radius: $br-radius;
      background-color: #f2f2f2;
    }

    .user-head__profile {
      @extend .flex;
      @extend .flex-column;
      @extend .flex-grow;
      align-items: flex-start;
      padding-left: 30px;
      .user-head__profile-nick {
        font-size: $fz-big;
        font-weight: bold;
      }
      .user-head__profile-id {
        font-size: $fz-default;
      }
    }
  }


  .space-placeholder {
    height: 10px;
  }

  .profile-method {
    @extend .flex;
    height: 50px;
    background-color: $c-white;
    justify-content: space-between;
    padding: 0 15px;
    &:active {
      background-color: $c-active;
    }
    .profile-method-value {
      color: $c-mark;
    }
  }
</style>
